<template>
    <div style="text-align: center">
        <el-pagination
            style="display: inline-block;margin:0 auto;"
            background
            layout="prev, pager, next"
            :pager-count="config_pager"
            :page-sizes="pageSizes"
            :total="total"
            :page-size="pageObj.page_size"
            :current-page="pageObj.pageCurrent"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
    /**
     * 封装的分页，只是用于操作 页数 +1 -1
     * size-change	pageSize 改变时会触发	每页条数
     * current-change	currentPage 改变时会触发	当前页
     * prev-click	用户点击上一页按钮改变当前页后触发	当前页
     * next-click	用户点击下一页按钮改变当前页后触发	当前页
     */
    export default {
        name: "page",
        props: {
            //总记录数
            total: {
                type: Number,
                default: 100
            }
        },
        data() {
            return {
                config_pager: 5,
                pageSizes: [10, 20, 50, 100],
                pageObj:{
                    pageCurrent: 1,
                    page_size: 10,
                },
            }
        }, methods: {
            // 每页条数变更
            handleSizeChange(val) {
                this.pageObj.page_size = val;
                // tihs.$emit 是指 触发 pageChange这个 方法 ，并 传入 pageobj作为参数。
                // 触发指定名称函数，并传入参数，这个函数可以是父组件的
                this.$emit('pageChange', this.pageObj);
            },
            // 当前页码变更
            handleCurrentChange(val) {
                this.pageObj.pageCurrent = val;
                this.$emit('pageChange', this.pageObj);
            }
        },
    }
</script>

<style scoped>
    @import "../../public/css/index.css";
</style>
